<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div class="query-card">
        <!-- <el-row type="flex" align="middle">
        <el-col :span="12">-->
        <div class="grid-content bg-purple search">
          <el-form ref="query" :model="query" label-width="100px">
            <el-form-item style="margin-bottom:0px" label="手机号">
              <i slot="label" class="el-icon-search" style="font-size:20px"></i>
              <el-input style="width:260px" v-model="query.keywords" placeholder="请输入手机号搜索"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="操作日期">
              <el-date-picker
                ref="picker"
                v-model="query.timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-col> -->
        <!-- <el-col :span="12"> -->
        <div class="grid-content bg-purple-light">
          <el-button type="primary" @click="queryAsk">查询</el-button>
          <el-button @click="queryReset">重置</el-button>
        </div>
        <!-- </el-col>
        </el-row>-->
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card class="box-card" v-loading="loading">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="right: 0;"
        src="@/assets/watermark.png"
      />
      <div style="display:flex">
        <el-button
          type="primary"
          style="margin-bottom:20px;margin-right:20px"
          @click="downLoad"
        >下载模板</el-button>
        <el-upload
          class="upload-demo"
          action="https://upload-z0.qiniup.com/"
          :limit="1"
          :data="postData"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          type="primary"
          style="margin-bottom:20px"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </div>

      <el-table
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        v-loading="loading"
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column align="center" type="index" width="50" label="序号" fixed></el-table-column>
        <el-table-column align="center" label="头像" fixed>
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.himg" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.himg"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class="watermark"
          prop="nickname"
          label="用户信息"
          width="120px"
          fixed
        >
          <template slot-scope="scoped">
            <div>{{scoped.row.nickname}}</div>
            <div>{{scoped.row.name}}</div>
            <div>{{scoped.row.mobile}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="name" label="真实姓名" fixed></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号" width="110"></el-table-column>-->
        <!-- <el-table-column align="center" label="性别">
          <template slot-scope="scope">
            <div v-if="scope.row.sex==0">保密</div>
            <div v-if="scope.row.sex==1">男</div>
            <div v-if="scope.row.sex==2">女</div>
          </template>
        </el-table-column>-->
        <el-table-column align="center" prop="balance" label="余额" sortable="custom"></el-table-column>
        <!-- <el-table-column align="center" prop="integral" label="积分" sortable="custom"></el-table-column> -->
        <el-table-column align="center" prop="liushui_day" label="无限流水"></el-table-column>
        <el-table-column align="center" prop="liushui_day_p" label="天选流水"></el-table-column>
        <el-table-column align="center" prop="liushui_day_sum" label="总流水"></el-table-column>
        <el-table-column align="center" prop="day_chong" label="充值"></el-table-column>
        <el-table-column align="center" prop="new_price" label="拉新"></el-table-column>
        <el-table-column align="center" prop="day_yingkiu" label="欧颓">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" width="500px">
              <p>A初始资产: 星石({{ scope.row.day_price.balance||0 }})+积分({{ scope.row.day_price.integral/50||0 }})+能量球({{ scope.row.day_price.power||0 }})+背包({{ scope.row.day_price.bag_price||0 }})+能量值({{ scope.row.day_price.energy }})</p>
              <p>B实时资产: 星石({{ scope.row.balance||0 }})+积分({{ scope.row.integral/50 ||0}})+能量球({{ scope.row.power ||0}})+背包({{ scope.row.bag_y_price ||0}})+能量值({{ scope.row.energy ||0}})</p>
              <p>A-B +充值({{ scope.row.day_chong||0 }})-当日购买背包，商城，积分({{ scope.row.delivery_bag||0 }}+{{ scope.row.delivery_shop||0 }}+{{ scope.row.delivery_shop_integral/50||0 }})+非当日支付退回({{scope.row.refund_bag||0}}+{{scope.row.refund_shop||0}}+{{scope.row.refund_shop_integral||0}})</p>
              <p>{{ returnNum(scope.row) }}</p>

              <div slot="reference" class="name-wrapper">{{ scope.row.day_yingkiu }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="delivery_bag" label="发货价值"></el-table-column>
        <el-table-column align="center" prop="refund_limit" label="商城发货"></el-table-column>
        <el-table-column align="center" prop="give" label="赠送"></el-table-column>
        <el-table-column align="center" prop="energy" label="合成剩余能量"></el-table-column>
        <el-table-column align="center" prop="bag_y_price" label="背包">
          <template slot-scope="scope">
            <div v-if="!scope.row.bag_y_price">0</div>
            <div v-else>{{scope.row.bag_y_price}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="date" label="日期"></el-table-column>
        <!-- <el-table-column align="center" prop="bag_price" label="背包总价值" sortable="custom">
          <template slot-scope="scope">
            <div v-if="!scope.row.bag_price">0</div>
            <div v-else>{{scope.row.bag_price}}</div>
          </template>
        </el-table-column>-->

        <!-- <el-table-column align="center" label="用户状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==1">正常用户</div>
            <div v-if="scope.row.status==2">禁止访问</div>
            <div v-if="scope.row.status==3">限制消费</div>
          </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" label="限制消费金额/每日">
          <template slot-scope="scope">
            <div v-if="scope.row.status==3">-</div>
            <div v-if="scope.row.status!=3">{{scope.row.max_money}}</div>
          </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" prop="last_time" label="最后交易时间"></el-table-column> -->
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { decadentList, downList } from '@/api/marketing'
import { parseTime } from '@/utils/index'
import { upload } from '@/api/system'

export default {
  name: 'BoutiqueGiveList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //query
      query: {
        keywords: '',
        add_time: '',
        status: '0',
        givetype: '0',
        timeArr: [],
        type: '0'
      },
      // 上传文件
      postData: {
        token: ''
      },
      userId: '',
      tableData: [],
      activeName: '0',
      loading: false,
      picktime: '1',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '近半月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 抽屉
      drawer: false,
      direction: 'rtl',
      form: {
        user_id: '',
        type: '',
        data: '',
        in_type: '',
        give_type: '',
        bag_type: '1',
        bag_id: [],
        goods_data: []
      },
      username: '',
      usermobile: '',
      dialogVisible: false,
      sendData: [],
      // 用户分页数据
      sendTotal: 0,
      sendCurrentPage: 1,
      sendPageSize: 10,
      //sendquery
      sendQuery: {
        keywords: ''
      },

      // 奖品数据
      rewardtotal: 0,
      rewardcurrentPage: 1,
      rewardpageSize: 10,
      //query
      rewardquery: {
        keywords: '',
        class_id: '0',
        lowPrice: '',
        heightPrice: ''
      },
      priceArr: [],
      boxRewardData: [],
      rewardloading: false,
      queryOptioins: [],
      queryLoading: false,
      rewarddialogVisible: false,
      selectArr: [],
      del_data: []
    }
  },
  mounted() {
    this.getList()
    this.getToken()
  },
  activated() {
    this.total = 0
    this.currentPage = 1
    this.pageSize = 10
    this.query.add_time = ''
    this.query.keywords = ''
    this.query.status = ''
    this.picktime = 1
    this.query.timeArr = []
    this.getList()
  },
  methods: {
    returnNum(item) {
      const A =
        (+item.day_price.balance || 0) +
        (+item.day_price.integral / 50 || 0) +
        (+item.day_price.power || 0) +
        (+item.day_price.bag_price || 0) +
        (+item.day_price.energy || 0)
      const B =
        (+item.balance || 0) +
        (+item.integral / 50 || 0) +
        (+item.power || 0) +
        (+item.bag_y_price || 0) +
        +item.energy
      const C = +item.day_chong || 0

      const D =
        (+item.delivery_bag || 0) +
        (+item.delivery_shop || 0) +
        (+item.delivery_shop_integral / 50 || 0)
      const E =
        (+item.refund_bag || 0) +
        (+item.refund_shop || 0) +
        (+item.refund_shop_integral / 50 || 0)

      return A - B + C - D + E
    },
    // 获取列表
    async getList() {
      this.loading = true
      console.log(this.query.timeArr)
      if (this.query.timeArr.length > 1) {
        this.query.add_time =
          parseTime(this.query.timeArr[0], '{y}-{m}-{d}') +
          ',' +
          parseTime(this.query.timeArr[1], '{y}-{m}-{d}')
      }

      const res = await decadentList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords,
        date: this.query.add_time
      })
      console.log(res)
      this.loading = false
      this.total = res.count
      this.tableData = res.data
      this.tableData.forEach((item) => {
        if (item.date == 0) {
          item.date = '-'
        } else {
          item.date = parseTime(item.date, '{y}-{m}-{d} {h}:{i}:{s}')
        }
      })
    },
    queryAsk() {
      console.log(this.query)
      this.currentPage = 1
      this.getList()
    },
    queryReset() {
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.add_time = ''
      this.query.keywords = ''
      this.query.status = ''
      this.picktime = 1
      this.query.timeArr = []
      this.getList()
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current
      this.getList()
    },

    async getToken() {
      const res = await upload()
      this.postData.token = res.data.uptoken
      this.url = res.data.domain
    },
    //下载模板
    async downLoad() {
      if (this.query.timeArr.length > 1) {
        this.query.add_time =
          parseTime(this.query.timeArr[0], '{y}-{m}-{d}') +
          ',' +
          parseTime(this.query.timeArr[1], '{y}-{m}-{d}')
      }
      window.open(
        `https://ouhun.wm2177.com/admin/excel/orderExport?keywords=${this.query.keywords}&date=${this.query.add_time}`
      )
    },
    // 上传
    async handleAvatarSuccess(res, file) {
      this.uploadUrl = this.url + res.key
      console.log(this.uploadUrl)
      const response = await downList({ url: this.uploadUrl })
      if (response.st == 1) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      } else if (response == -1) {
        this.$message.error('上传失败')
        console.log(response)
      }
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // if (!isLt1M) {
      //   this.$message.error("上传头像图片大小不能超过 1MB!");
      //   return;
      // }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
.box-card {
  margin-bottom: 20px;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
.query-card {
  ::v-deep .el-form {
    display: flex;
  }
}

::v-deep .el-drawer.rtl {
  padding-bottom: 20px;
  width: 1000px !important;
  overflow: auto;
}
</style>